import React from 'react';
import {connect} from 'dva';
import {Form, Input, Button, Icon, Checkbox} from 'antd';
import styles from './Login.less';

const FormItem = Form.Item;

@connect(state => ({
  loading: state.loading,
}))
@Form.create()
export default class Login extends React.PureComponent {

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  handleSubmit = (e) => {
    e.preventDefault();
    const {dispatch, form} = this.props;
    form.validateFieldsAndScroll({force: true}, (errors, values) => {
      if (errors) {
        return;
      }

      dispatch({
        type: 'user/login',
        payload: values,
      });
    });
  };

  render() {
    const {form, loading} = this.props;
    const {getFieldDecorator} = form;
    return (
      <div className={styles.main}>
        <Form onSubmit={this.handleSubmit}>
          <FormItem hasFeedback>
            {getFieldDecorator('username', {
              rules: [{
                required: true,
                message: '请输入账户名！',
              }],
            })(
              <Input prefix={<Icon type="user" className={styles.prefixIcon}/>} placeholder="用户名"/>
            )}
          </FormItem>
          <FormItem hasFeedback>
            {getFieldDecorator('password', {
              rules: [{
                required: true,
                message: '请输入密码！',
              }],
            })(
              <Input prefix={<Icon type="lock" className={styles.prefixIcon}/>} type="password" placeholder="密码"/>
            )}
          </FormItem>
          <FormItem className={styles.additional}>
            {getFieldDecorator('remember', {
              valuePropName: 'checked',
              initialValue: true,
            })(
              <Checkbox className={styles.autoLogin}>自动登录</Checkbox>
            )}
            {/*<a className={styles.forgot} href="">忘记密码</a>*/}
            <Button loading={loading.effects['user/login']} className={styles.submit} type="primary" htmlType="submit">
              登录
            </Button>
          </FormItem>
        </Form>
      </div>
    );
  }
}
